<script setup>
import { reactive, watch } from 'vue'

const _props = defineProps({
  url: {
    type: Object,
    default: () => {}
  }
})

const detail = reactive({
  description: '',
  thumbnailUrl: '',
  title: '',
  url: ''
})

watch(
  () => _props.url,
  (newVal) => {
    Object.assign(detail, newVal)
  },
  { immediate: true }
)
</script>

<template>
  <div class="mx-4 my-2 overflow-hidden w-full">
    <el-text
      v-if="detail.title || detail.description"
      class="text-wrap w-full inline-block break-words hyphens-auto whitespace-pre-wrap"
      size="default"
      >{{ detail.title }} {{ detail.description }}</el-text
    >
    <!-- <el-divider /> -->
    <el-text
      v-if="detail.url"
      class="text-wrap w-full inline-block break-words hyphens-auto whitespace-pre-wrap"
      size="default"
      type="primary"
    >
      <a
        class="text-wrap w-full inline-block break-words hyphens-auto whitespace-pre-wrap"
        :href="detail.url"
        target="_blank"
      >
        {{ detail.url }}
      </a>
    </el-text>
    <el-text
      v-if="detail.thumbnailUrl"
      class="text-wrap w-full inline-block break-words hyphens-auto whitespace-pre-wrap"
      size="default"
      type="primary"
    >
      <a
        class="text-wrap w-full inline-block break-words hyphens-auto whitespace-pre-wrap"
        :href="detail.thumbnailUrl"
        target="_blank"
      >
        {{ detail.thumbnailUrl }}
      </a></el-text
    >
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-image-viewer__close) {
  width: 36px;
  height: 36px;
  margin-top: 20px;
}
</style>
